<template>
  <div class="workbench">
    <a-row :gutter="[8, 8]" :wrap="true">
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">房源标签分析 </a-col>
          <div
            id="listingLabel"
            style="margin-right: 100px"
            v-show="listingLabelList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="listingLabelList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">房源户型分布 </a-col>
          <div id="allListings2"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">空置天数占比 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerVacant, pickerVacant]"
              v-model:value="vacantMoment"
              :allowClear="false"
              @change="vacantEcharts"
            />
          </a-col>
          <div
            id="vacantEcharts2"
            style="margin-right: 100px"
            v-show="vacantEchartsList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="vacantEchartsList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">房源累计空置天数排名 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerRentLoss, pickerRentLoss]"
              v-model:value="rentLossMoment"
              :allowClear="false"
              @change="rentLoss"
            />
          </a-col>
          <div id="rentLoss2" v-show="rentLossList.length"></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="rentLossList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">流转效率排名 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerCirculationref, pickerCirculationref]"
              v-model:value="benefitLossRateMoment"
              :allowClear="false"
              @change="circulation"
            />
          </a-col>
          <div id="circulation" v-show="circulationList.length"></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="circulationList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head" style="margin-bottom: 50px"
          >空置房源空置天数排名
          </a-col>
          <div id="vacantDays2" v-show="vacantDaysList.length"></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="vacantDaysList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">效益流失率 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerCirculationref, pickerCirculationref]"
              v-model:value="benefitLossRateRateMoment"
              :allowClear="false"
              @change="benefitLossRate"
            />
          </a-col>
          <div id="benefitLossRate"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">租金流失排名 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerRentLossRanking, pickerRentLossRanking]"
              v-model:value="RankingMoment"
              :allowClear="false"
              @change="rentLossRanking"
            />
          </a-col>
          <div id="rentLossRanking" v-show="rankingList.length"></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="rankingList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">房源面积-空置天数分析</a-col>
          <div id="housingArea"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">房源装修分布分析 </a-col>
          <div id="houseDecoration" style="margin-right: 100px"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  reactive,
  nextTick,
} from "vue";
import {
  QuestionCircleOutlined,
  MenuOutlined,
  DownloadOutlined,
  FormOutlined,
  DeleteOutlined,
  CheckSquareOutlined,
  PlusOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";
import { Chart } from "@antv/g2";
import { Empty, Modal, Progress } from "ant-design-vue";
import request from "../../../common/utils/request";
import moment from "moment";
import dayOfYear from "moment/plugin/dayOfYear";
moment.extend(dayOfYear);
const dateFormat = "YYYY-MM-DD";
export default defineComponent({
  name: "homeOverviewRoom",
  components: {
    // QuestionCircleOutlined,
    MenuOutlined,
    DownloadOutlined,
    FormOutlined,
    DeleteOutlined,
    CheckSquareOutlined,
    PlusOutlined,
    CaretDownOutlined,
    Empty,
  },
  setup() {
    // 房源标签分析
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    const listingLabelList = ref([]);
    const listing = {};
    const listingLabel = () => {
      if (!listing.chart1) {
        listing.chart1 = new Chart({
          container: "listingLabel",
          autoFit: true,
          height: 500,
          width: 500,
          padding: [80, 20, 80, 0],
        });
      }

      let data = [];
      request.get("/org", "/source/houseTagAnalysis").then((res) => {
        listingLabelList.value = res.list;
        data = res.list;
        listing.chart1.data(data);
        // 新建一个 view 用来单独渲染Annotation
        listing.chart1.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.75,
        });
        listing.chart1.tooltip(false);

        listing.chart1
          .annotation()
          .text({
            position: ["50%", "50%"],
            content: "总计",
            style: {
              fontSize: 14,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: -20,
          })
          .text({
            position: ["50%", "50%"],
            content: res.totals,
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetX: -10,
            offsetY: 10,
          })
          .text({
            position: ["50%", "50%"],
            content: "个",
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetY: 10,
            offsetX: 34,
          });

        // 声明需要进行自定义图例字段： 'item'
        listing.chart1.legend("name", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: `${obj.name}   ${obj.total}`, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: listing.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        listing.chart1
          .interval()
          .adjust("stack")
          .position("percent")
          .color("name")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        listing.chart1.removeInteraction("legend-filter");
        listing.chart1.interaction("element-active");

        listing.chart1.render();
      });
    };

    // 房源户型分布
    const allListings = () => {
      if (!listing.chiart2) {
        listing.chiart2 = new Chart({
          container: "allListings2",
          autoFit: true,
          height: 500,
          padding: [80],
        });
      }

      let data = [];
      request.get("/org", "/source/roomTypeSpread").then((res) => {
        data = res.list;
        listing.chiart2.data(data);
        listing.chiart2.scale({
          total: {
            min: 0,
            nice: true,
          },
        });

        listing.chiart2.axis("groupName", {
          label: {
            rotate: -1,
            offset: 36,
          },
          tickLine: null,
        });
        listing.chiart2.annotation().text({
          content: "个",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -20,
        });
        listing.chiart2.annotation().text({
          position: ["102%", "100%"],
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        listing.chiart2.tooltip({
          showMarkers: false,
        });
        listing.chiart2.interaction("active-region");

        listing.chiart2
          .interval()
          .position("groupName*total")
          .style({ radius: [20, 20, 0, 0] })
          .color("name")
          .size(20);

        listing.chiart2.legend(false);

        listing.chiart2.render();
      });
    };

    // 空置天数占比
    const vacantChart = {};
    const pickerVacant = ref("date");
    const vacantMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const vacantEchartsList = ref([]);
    const vacantEcharts = () => {
      if (!vacantChart.chart1) {
        vacantChart.chart1 = new Chart({
          container: "vacantEcharts2",
          autoFit: true,
          height: 500,
          width: 500,
          padding: [80, 100, 80, 0],
        });
        // 新建一个 view 用来单独渲染Annotation
        vacantChart.chart1.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        vacantChart.chart1.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 移除图例点击过滤交互
        vacantChart.chart1.removeInteraction("legend-filter");
        vacantChart.chart1.interaction("element-active");
      }
      request
        .get("/org", "/board/freeRoomRatio", {
          start_date: vacantMoment.value[0].format(dateFormat),
          end_date: vacantMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          vacantEchartsList.value = res.list;
          vacantChart.chart1
            .annotation()
            .text({
              position: ["50%", "50%"],
              content: "总计",
              style: {
                fontSize: 14,
                fill: "#8c8c8c",
                textAlign: "center",
              },
              offsetY: -20,
            })
            .text({
              position: ["50%", "50%"],
              content: res.totals,
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetX: -10,
              offsetY: 10,
            })
            .text({
              position: ["50%", "50%"],
              content: "个",
              style: {
                fontSize: 24,
                fill: "#8c8c8c",
                textAlign: "center",
                fontWeight: 600,
              },
              offsetY: 10,
              offsetX: 34,
            });
          // 声明需要进行自定义图例字段： 'item'
          vacantChart.chart1.legend("groupName", {
            position: "right", // 配置图例显示位置
            custom: true, // 关键字段，告诉 G2，要使用自定义的图例
            items: res.list.map((obj, index) => {
              return {
                name: obj.groupName + `     ` + obj.groupNum, // 对应 itemName
                value: obj.percent, // 对应 itemValue
                marker: {
                  symbol: "square", // marker 的形状
                  style: {
                    r: 5, // marker 图形半径
                    fill: vacantChart.chart1.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                  },
                }, // marker 配置
              };
            }),

            itemValue: {
              style: {
                fill: "#999",
              }, // 配置 itemValue 样式
              formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
            },
          });

          vacantChart.chart1
            .interval()
            .adjust("stack")
            .position("percent")
            .color("groupName")
            .style({
              fillOpacity: 1,
            })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr("fill"),
                    strokeOpacity: shape.attr("fillOpacity"),
                  };
                },
              },
            });
          vacantChart.chart1.changeData(res.list);
          vacantChart.chart1.render();
        });
    };

    // 房源累计空置天数排名
    const rentLossChart = {};
    const pickerRentLoss = ref("date");
    const rentLossMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const rentLossList = ref([]);
    const rentLoss = () => {
      if (!rentLossChart.chart1) {
        rentLossChart.chart1 = new Chart({
          container: "rentLoss2",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 150],
        });
        rentLossChart.chart1.scale({
          days: {
            min: 0,
            nice: true,
          },
        });
        rentLossChart.chart1.axis("days", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            offset: 1,
            offsetX: -10,
          },
        });
        rentLossChart.chart1.coordinate().transpose();

        rentLossChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "天数",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 560,
        });

        rentLossChart.chart1.tooltip({
          showMarkers: false,
        });

        rentLossChart.chart1.axis({
          label: {
            rotate: -1,
          },
        });

        rentLossChart.chart1.interaction("active-region");
        rentLossChart.chart1
          .interval()
          .position("roomName*days")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        rentLossChart.chart1.legend(false);
      }
      request
        .get("/org", "/board/roomVacantRankByDate", {
          startDate: rentLossMoment.value[0].format(dateFormat),
          endDate: rentLossMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          rentLossList.value = res.list;
          rentLossChart.chart1.changeData(res.list);
          rentLossChart.chart1.render();
        });
    };

    // 流转效率
    const circulationChart = {};
    const pickerCirculationref = ref("date");
    const circulationList = ref([]);
    const benefitLossRateMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const circulation = () => {
      if (!circulationChart.chart1) {
        circulationChart.chart1 = new Chart({
          container: "circulation",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 150],
        });

        circulationChart.chart1.scale({
          days: {
            min: 0,
            nice: true,
          },
        });
        circulationChart.chart1.axis("days", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
            // .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            rotate: -1,
            offset: 1,
            offsetX: -10,
          },
        });
        circulationChart.chart1.coordinate().transpose();

        circulationChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "天数",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 560,
        });

        circulationChart.chart1.tooltip({
          showMarkers: false,
        });

        circulationChart.chart1.axis({
          label: {
            rotate: -1,
          },
        });

        circulationChart.chart1.interaction("active-region");
        circulationChart.chart1
          .interval()
          .position("roomName*days")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        circulationChart.chart1.legend(false);
      }
      request
        .get("/org", "/source/roomRoamRank", {
          startDate: benefitLossRateMoment.value[0].format(dateFormat),
          endDate: benefitLossRateMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          circulationList.value = res.list;
          circulationChart.chart1.changeData(res.list);
          circulationChart.chart1.render();
        });
    };

    // 空置房源空置天数排名
    const vacantDaysList = ref([]);
    const vacantDays = () => {
      if (!circulationChart.chiart2) {
        circulationChart.chiart2 = new Chart({
          container: "vacantDays2",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 150],
        });
      }

      let data = [];
      request.get("/org", "/board/roomVacantRank").then((res) => {
        vacantDaysList.value = res.list;
        data = res.list;
        circulationChart.chiart2.data(data);
        circulationChart.chiart2.scale({
          percent: {
            min: 0,
            nice: true,
          },
        });
        circulationChart.chiart2.axis("days", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
            rotate: -1,
            offset: 1,
            offsetX: -10,
          },
        });
        circulationChart.chiart2.axis("roomName", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });
        circulationChart.chiart2.annotation().text({
          position: ["102%", "100%"],
          content: "天数",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 560,
        });
        circulationChart.chiart2.coordinate().transpose();

        circulationChart.chiart2.tooltip({
          showMarkers: false,
        });

        circulationChart.chiart2.interaction("active-region");
        circulationChart.chiart2
          .interval()
          .position("roomName*days")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        circulationChart.chiart2.legend(false);
        circulationChart.chiart2.render();
      });
    };

    // 效益流失率
    const benefitLossRateChart = {};
    const pickerBenefitLossRate = ref("date");
    const benefitLossRateRateMoment = ref([
      moment().dayOfYear(1),
      moment().dayOfYear(365),
    ]);
    const benefitLossRate = () => {
      if (!benefitLossRateChart.chart1) {
        benefitLossRateChart.chart1 = new Chart({
          container: "benefitLossRate",
          autoFit: true,
          height: 500,
          padding: [70],
        });
        benefitLossRateChart.chart1.scale({
          percent: {
            max: 100,
            min: 0,
            nice: true,
          },
        });

        benefitLossRateChart.chart1.annotation().text({
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -380,
          offsetX: -15,
        });
        benefitLossRateChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "月份",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 720,
        });

        benefitLossRateChart.chart1.axis("percent", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val + "%";
            },
          },
        });

        benefitLossRateChart.chart1.axis("date", {
          label: {
            rotate: -1,
            offset: 30,
          },
          tickLine: null,
        });

        benefitLossRateChart.chart1
          .line()
          .position("date*percent")
          .color("name")
          .shape("smooth");
        benefitLossRateChart.chart1
          .area()
          .position("date*percent")
          .color("l(90) 0:#5b8df7 1:#fbfdff")
          .shape("smooth");
        benefitLossRateChart.chart1.legend(false);
      }
      request
        .get("/org", "/source/incomeLossRate", {
          startDate: benefitLossRateRateMoment.value[0].format(dateFormat),
          endDate: benefitLossRateRateMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          benefitLossRateChart.chart1.changeData(res.list);
          benefitLossRateChart.chart1.render();
        });
    };

    // 租金流失排名
    const rentLossRankingChart = {};
    const pickerRentLossRanking = ref("date");
    const RankingMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const rankingList = ref([]);
    const rentLossRanking = () => {
      if (!rentLossRankingChart.chart1) {
        rentLossRankingChart.chart1 = new Chart({
          container: "rentLossRanking",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 100],
        });
        rentLossRankingChart.chart1.scale({
          totals: {
            min: 0,
            nice: true,
          },
        });
        rentLossRankingChart.chart1.axis("totals", {
          animate: true,
          label: {
            formatter: (val) => {
              return val;
            },
            rotate: -1,
            offsetX: -10,
            offset: 10,
          },
        });
        rentLossRankingChart.chart1.coordinate().transpose();
        rentLossRankingChart.chart1.annotation().text({
          position: ["102%", "100%"],
          content: "元",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 620,
        });

        rentLossRankingChart.chart1.tooltip({
          showMarkers: false,
        });

        rentLossRankingChart.chart1.interaction("active-region");
        rentLossRankingChart.chart1
          .interval()
          .position("roomName*totals")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        rentLossRankingChart.chart1.legend(false);
      }
      request
        .get("/org", "/source/rentLossRank", {
          startDate: RankingMoment.value[0].format(dateFormat),
          endDate: RankingMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          rankingList.value = res.list;
          rentLossRankingChart.chart1.changeData(res.list);
          rentLossRankingChart.chart1.render();
        });
    };

    // 房源面积-空置天数分析
    const housingArea = () => {
      if (!rentLossRankingChart.chiart2) {
        rentLossRankingChart.chiart2 = new Chart({
          container: "housingArea",
          autoFit: true,
          height: 500,
          padding: [90],
        });
      }

      let data = [];
      request.get("/org", "/source/roomVacantSpread").then((res) => {
        data = res.list;
        rentLossRankingChart.chiart2.data(data);
        rentLossRankingChart.chiart2.scale({
          闲置天数: { min: 0, nice: true },
          房源面积: { min: 0, nice: true },
        });
        rentLossRankingChart.chiart2.tooltip({
          showCrosshairs: true,
          showContent: true,
          // crosshairs: {
          //   type: "xy",
          //   text: (type, defaultText, items) => {
          //     const color = items[0].color;
          //     if (type === "x") {
          //       return {
          //         offset: 5,
          //         position: "end",
          //         content: defaultText + " cm",
          //         style: {
          //           textAlign: "center",
          //           textBaseline: "top",
          //           fontSize: 14,
          //           fontWeight: "bold",
          //         },
          //       };
          //     }
          //     return {
          //       offset: 5,
          //       content: defaultText + " kg",
          //       style: {
          //         textAlign: "end",
          //         fontSize: 14,
          //         fontWeight: "bold",
          //       },
          //     };
          //   },
          //   textBackground: null,
          // },
        });

        rentLossRankingChart.chiart2.axis("房源面积", {
          label: {
            formatter: (val) => {
              return val.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
              // return val
            },
            offset: 16,
            rotate: -1,
          },
          tickLine: null,
        });

        rentLossRankingChart.chiart2.axis("闲置天数", {
          label: {
            formatter: (val) => {
              return val.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
              // return val
            },
          },
          tickLine: null,
        });
        rentLossRankingChart.chiart2.annotation().text({
          content: "闲置天数",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -350,
          offsetX: -57,
        });
        rentLossRankingChart.chiart2.annotation().text({
          position: ["102%", "100%"],
          content: "房源面积(m²)",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 675,
        });

        rentLossRankingChart.chiart2
          .point()
          .position("房源面积*闲置天数")
          .shape("circle")
          .style({
            fillOpacity: 0.85,
          });
        rentLossRankingChart.chiart2.interaction("legend-highlight");

        rentLossRankingChart.chiart2.render();
      });
    };
    // 房源装修分布分析
    const houseDecoration = () => {
      if (!rentLossRankingChart.chiart3) {
        rentLossRankingChart.chiart3 = new Chart({
          container: "houseDecoration",
          autoFit: true,
          height: 500,
          padding: [80, 220, 80, 0],
        });
      }

      let data = [];
      request.get("/org", "/source/roomDecorationSpread").then((res) => {
        data = res.list;
        rentLossRankingChart.chiart3.data(data);
        // 新建一个 view 用来单独渲染Annotation
        rentLossRankingChart.chiart3.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        rentLossRankingChart.chiart3.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        rentLossRankingChart.chiart3
          .annotation()
          .text({
            position: ["50%", "50%"],
            content: "总计",
            style: {
              fontSize: 14,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: -20,
          })
          .text({
            position: ["52%", "50%"],
            content: res.totals + "m²",
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetX: -10,
            offsetY: 10,
          });

        // 声明需要进行自定义图例字段： 'item'
        rentLossRankingChart.chiart3.legend("groupName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.groupName + `       ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                style: {
                  r: 5, // marker 图形半径
                  fill: rentLossRankingChart.chiart3.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        rentLossRankingChart.chiart3
          .interval()
          .adjust("stack")
          .position("percent")
          .color("groupName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        rentLossRankingChart.chiart3.removeInteraction("legend-filter");
        rentLossRankingChart.chiart3.interaction("element-active");

        rentLossRankingChart.chiart3.render();
      });
    };

    onMounted(() => {
      listingLabel();
      allListings();
      vacantEcharts();
      rentLoss();
      circulation();
      vacantDays();
      benefitLossRate();
      rentLossRanking();
      housingArea();
      houseDecoration();
      setTimeout(() => {
        nextTick(() => {
          const e = new Event("resize");
          window.dispatchEvent(e);
        });
      }, 200);
    });

    onUnmounted(() => {
      if (vacantChart.chart1) {
        vacantChart.chart1.destroy();
      }
      if (listing.chart1) {
        listing.chart1.destroy();
      }
      if (listing.chiart2) {
        listing.chiart2.destroy();
      }
      if (rentLossChart.chart1) {
        rentLossChart.chart1.destroy();
      }
      if (circulationChart.chart1) {
        circulationChart.chart1.destroy();
      }
      if (circulationChart.chiart2) {
        circulationChart.chiart2.destroy();
      }
      if (benefitLossRateChart.chart1) {
        benefitLossRateChart.chart1.destroy();
      }
      if (rentLossRankingChart.chart1) {
        rentLossRankingChart.chart1.destroy();
      }
      if (rentLossRankingChart.chiart2) {
        rentLossRankingChart.chiart2.destroy();
      }
      if (rentLossRankingChart.chiart3) {
        rentLossRankingChart.chiart3.destroy();
      }
    });
    return {
      listingLabelList,
      simpleImage,
      dateFormat,
      vacantMoment,
      vacantEcharts,
      rentLoss,
      circulation,
      benefitLossRate,
      rentLossRanking,
      pickerRentLossRanking,
      RankingMoment,
      pickerVacant,
      rentLossMoment,
      pickerRentLoss,
      benefitLossRateMoment,
      pickerCirculationref,
      benefitLossRateRateMoment,
      pickerBenefitLossRate,
      rankingList,
      vacantEchartsList,
      rentLossList,
      circulationList,
      vacantDaysList,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  background: #fff;
  padding: 10px;
  width: 49.5%;
}
.heads {
  margin-bottom: 10px;
  display: flex;
}
.head {
  font-size: 18px;
  font-weight: 600;
}
.Line {
  width: 100%;
  height: 2px;
  background-color: #e7eaed;
}
.lineText {
  top: -12px;
  left: 48%;
  background-color: #f0f2f5;
  padding: 0 10px;
}
.workbench {
  padding: 10px;
}
:deep(.ant-card-body){
  padding: 0px;
}
</style>
